<!DOCTYPE HTML>
<html>
<head>
    <title>余立东个人网站后台管理系统</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="/public/assets/user/main.css" />
    <noscript><link rel="stylesheet" href="/public/assets/user/noscript.css" /></noscript>
    <script src="/public/assets/js/jquery.js"></script>
    <script src="/public/assets/js/bootstrap.js"></script>
    <script src="/public/assets/js/layer/layer.js"></script>
    <script src="/public/assets/js/common.js"></script>
    <style>
        #embed-captcha {
            width: 300px;
            margin: 0 auto;
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body class="is-preload">

<!-- Wrapper -->
<div id="wrapper">

    <!-- Main -->
    <section id="main">
        <header>
            <span class="avatar"><img src="/public/assets/images/avatar.jpg" alt="" /></span>
            <h1>登陆</h1>
        </header>
        <footer>
            <form action="./VerifyLoginServlet" method="post" class="bs-example bs-example-form" role="form" onsubmit="return handlerEmbed()">
                <div class="input-group">
                    <input id="username" type="text" class="form-control" placeholder="please fill in your name" name="username" required="required">
                </div>
                <br>
                <div class="input-group">
                    <input id="pwd" type="password" class="form-control" placeholder="please fill in your password" name="pwd" required="required" >
                </div>
                <br>
                <div class="input-group">
                    <!--<input type="text" class="form-control" placeholder="验证码" >-->
                    <div id="embed-captcha"></div>
                    <p id="wait" class="show">正在加载验证码......</p>
                </div>
                <br>
                <div class="input-group">
                   <input id="embed-submit" type="button" class="form-control" value="确认登陆">
                </div>
            </form>
        </footer>
    </section>

    <!-- Footer -->
    <footer id="footer">
        <ul class="copyright">
            <li>&copy; yulidong.cn</li><li>Design: <a href="http://yulidong.cn">余立东个人网站后台管理系统</a></li>
        </ul>
    </footer>

</div>

<!-- Scripts -->
<script src="/public/assets/js/gt3/gt.js"></script>
<script>
    //极验证
    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var username = $('#username').val();
            if(!username){
                layer.msg('用户名不能为空');
                return;
            }
            var pwd = $('#pwd').val();
            if(!pwd){
                layer.msg('密码不能为空');
                return;
            }
            var validate = captchaObj.getValidate();
            if (!validate) {
                layer.msg('请先完成验证');
                return;
            }
            var url = './VerifyLoginServlet';
            var data = $('form').serializeArray();
            ajax(url,data,"POST",function(e){
                if(e.status == 1){
                    window.location.href='/admin/index';
                }else{
                     layer.msg(e.msg);
                     captchaObj.reset()
                }
            })

        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "./geettest?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            //console.log(data);
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha,
                product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        }
    });
//极验证结束

    if ('addEventListener' in window) {
        window.addEventListener('load', function() { document.body.className = document.body.className.replace(/\bis-preload\b/, ''); });
        document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
    }
</script>

</body>
</html>